<script lang="tsx">
/**
 * 博客全局配置
 */
export default {
  name: "blog-setting"
}
</script>

<script lang="tsx" setup>
import {defineSheetForm} from "@/frame/components/base/sheet-form/constructor.ts"
import {nextTick, onMounted, ref} from "vue"
import SheetForm from "@/frame/components/base/sheet-form/index.vue"
import {processRequest} from "@/frame/apis/request"
import {ElMessage} from "element-plus"

/**
 * 定义表单
 */
const sheetFormRef = ref()
const form = defineSheetForm({
  labelWidth: "100px",
  els: [
    {
      eType: "el-input",
      label: "博客名称",
      prop: "blogName",
      props: {
        placeholder: "博客名称",
        clearable: true
      }
    },
    {
      eType: "el-upload",
      label: "首页背景图",
      prop: "qrCode",
      props: {
        action: "/development/anqin/api/Upload",
        limit: 1
      }
    }
  ]
})

/**
 * 挂载
 */
onMounted(() => {
  getFormData()
})

/**
 * 获取数据
 */
const getFormData = async () => {
  isLoading.value = true
  const result = await processRequest.get("/api/BlogSystemConfigs")
  nextTick(() => {
    sheetFormRef.value.setFormData(result)
  })
  isLoading.value = false
}

/**
 * 提交
 */
const isLoading = ref(false)
const handleSubmit = async () => {
  isLoading.value = true
  const formData = await sheetFormRef.value.getFormData()
  await processRequest.put("/api/BlogSystemConfigs", {
    ...formData
  })
  ElMessage.success("更新成功")
  await getFormData()
  isLoading.value = false
}
</script>

<template>
  <div v-loading="isLoading" class="blog-setting">
    <SheetForm ref="sheetFormRef" :SheetFormModel="form"/>
    <div class="form-footer">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.blog-setting {
  background-color: white;
  padding: 20px;
  border-radius: 20px;

  .form-footer {
    text-align: center;
  }
}
</style>